<template>
    <div>
        <list-top></list-top>
        <div class="storeContent">
            <div class="head">
                <div class="headInner">
                    <img src="./images/bak01m.png" alt="" class="logo">
                    <div class="storeMsg">
                        <h1>桂林医药股份有限公司</h1>
                        <div>
                            <span class="b-place">地点：桂林</span>
                            <el-rate v-model="value5" disabled>
                            </el-rate>
                        </div>
                    </div>
                    <div class="ewm">
                        <img src="./images/bak02m.png" alt="">
                        <span>手机下单更便捷</span>
                    </div>
                </div>
            </div>
            <div class="storeNav">
                <div class="headTitle">
                    <span class="active">首页</span>
                    <span>所有商品</span>
                    <span>公司档案</span>
                    <span>联系客服</span>
                    <span>收藏店铺</span>
                </div>
            </div>
            <img src="./images/bak03m.jpg" alt="" style="width:100%;">
            <div class="storeIndexMain">
                <div class="rcdGoods">
                    <div class="rcdTopBar">
                        <div class="headTitle fl"><span class="active">推荐商品</span></div>
                        <span class="change" @click="replace"><i class="iconfont icon-huanyihuan"></i>换一换</span>
                    </div>
                    <div class="rcdGoodsList">
                        <div class="rcdItem" v-for="index in arr" :key="index">
                            <img :src="rcdGoodsList[index].img" alt="" class="goodsImg">
                            <a href="#" :title="rcdGoodsList[index].name" class="goodsName">{{rcdGoodsList[index].name}}</a>
                            <div class="price"><em>￥</em>{{rcdGoodsList[index].price}}</div>
                        </div>
                    </div>
                </div>
                <div class="rcdGoods">
                    <div class="rcdTopBar">
                        <div class="headTitle fl"><span class="active">老人用药</span></div>
                        <span class="change" @click="replace"><i class="iconfont icon-huanyihuan"></i>换一换</span>
                    </div>
                    <div class="rcdGoodsList">
                        <div class="rcdItem" v-for="index in arr" :key="index">
                            <img :src="rcdGoodsList[index].img" alt="" class="goodsImg">
                            <a href="#" :title="rcdGoodsList[index].name" class="goodsName">{{rcdGoodsList[index].name}}</a>
                            <div class="price"><em>￥</em>{{rcdGoodsList[index].price}}</div>
                        </div>
                    </div>
                </div>
                <div class="rcdGoods">
                    <div class="rcdTopBar">
                        <div class="headTitle fl"><span class="active">儿童用药</span></div>
                        <span class="change" @click="replace"><i class="iconfont icon-huanyihuan"></i>换一换</span>
                    </div>
                    <div class="rcdGoodsList">
                        <div class="rcdItem" v-for="index in arr" :key="index">
                            <img :src="rcdGoodsList[index].img" alt="" class="goodsImg">
                            <a href="#" :title="rcdGoodsList[index].name" class="goodsName">{{rcdGoodsList[index].name}}</a>
                            <div class="price"><em>￥</em>{{rcdGoodsList[index].price}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import listTop from "./public/listTop";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                value5: 3,
                rcdGoodsList: [{
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "1汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "2汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "3哈哈大会片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "4第三个十多个收到公司打工",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "5汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "6汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "7汇仁 肾宝片 126片 男女肾虚亏阴阳虚",
                        price: "32.5"
                    }
                ],
                arr: [0, 1, 2, 3, 4]
            }
        },
        methods: {
            // 换一换
            replace() {
                var a = [];
                var j = 0;
                while (j < 5) {
                    var b = Math.floor((Math.random() * this.rcdGoodsList.length));
                    if (a.indexOf(b) == -1) {
                        a.push(b);
                        j++;
                    }
                };
                this.arr = a;
            }
        },
    }
</script>

<style lang="less">
    @import "./css/mallStore.less";
</style>
